


/// 组件-猫罐头
import Group from "./group";
import {Ellipse} from "./shape";
import Block from "./block";
import Img from "./img";
import {distence, px} from "../libs/utils";

export default class Cans extends Group {
    constructor(x, y, width, height,callback) {
        super();
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;

        this.cansGroup=[];
        this.callback = callback;
        this.currentIsShowCans = true;



        var can11 = new Img(this.getCanImgSrc(),x+px(43),y+px(53),px(93),px(93));
        this.addChild(can11,"can11")
        var can1 = new Img(this.getCanImgSrc(),x+px(43),y,px(93),px(93));
        this.addChild(can1,"can1")


        var can22 = new Img(this.getCanImgSrc(),x+px(153),y+px(3),px(93),px(93));
        this.addChild(can22,"can22")
        var can2 = new Img(this.getCanImgSrc(),x+px(153),y-px(50),px(93),px(93));
        this.addChild(can2,"can2")

        var can3 = new Img(this.getCanImgSrc(),x+px(93),y+px(90),px(93),px(93));
        this.addChild(can3,"can3")

        var can4 = new Img(this.getCanImgSrc(),x+px(160),y+px(110),px(93),px(93));
        this.addChild(can4,"can4")


        var can5 = new Img(this.getCanImgSrc(),x+px(230),y+px(30),px(93),px(93));
        this.addChild(can5,"can5")

        var can6 = new Img(this.getCanImgSrc(),x+px(330),y-px(40),px(93),px(93));
        this.addChild(can6,"can6")


        var can7 = new Img(this.getCanImgSrc(),x+px(420),y+px(40),px(93),px(93));
        this.addChild(can7,"can7")

        var can88 = new Img(this.getCanImgSrc(),x+px(350),y+px(60),px(93),px(93));
        this.addChild(can88,"can88")
        var can8 = new Img(this.getCanImgSrc(),x+px(350),y+px(10),px(93),px(93));
        this.addChild(can8,"can8")

        var can9 = new Img(this.getCanImgSrc(),x+px(300),y+px(90),px(93),px(93));
        this.addChild(can9,"can9")
        canvas.addEventListener('touchmove', this._triggerMove);
        this.cansGroup.push(can1,can11,can2,can22,can3,can4,can5,can6,can7,can8,can88,can9)

        if(this.currentIsShowCans){
            this.showCans()
        }else {
            this.hideCans(0)
        }
    }

    getCanImgSrc(){

        const numbers = '123';
        const randomIndex = Math.floor(Math.random() * numbers.length);
        const randomNumber = numbers.charAt(randomIndex);
        switch (randomNumber){
            case "1":
                return "js/sub/images/main/img_guantou1.png";
            case "2":
                return "js/sub/images/main/img_guantou2.png";
            default:
                return "js/sub/images/main/img_guantou3.png";
        }
    }

    _triggerMove =(e) => {
        if (!this.visible) return;

        e = e.touches ? e.touches[0] : e;
        const { pageX: left, pageY: top } = e;
        var inner = this.checkIsOnThisSprite(left, top);
        if (!inner) return;

        console.log("罐头触摸事件 移动")
        this.callback()

    }

    hideCans(timeout = 30){
        if(this.currentIsShowCans === false){
            return
        }
        this.currentIsShowCans =  false;
        this.cansGroup.forEach((value, index) => {
            setTimeout(()=>{
                value.visible = false;
            },timeout*index)

        })
    }
    showCans(){
        if(  this.currentIsShowCans === true){
            return
        }
        this.currentIsShowCans = true;
        this.cansGroup.forEach((value, index) => {
            setTimeout(()=>{
                value.visible = true;
            },30*index)

        })
    }
}